import { Button, message, Steps, Select, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import React, { useState, useEffect } from 'react';
import Partainfos from '../model/partainfo/Partainfos';
import Partbinfos from '../model/partbinfo/Partbinfos';
import Addproduction from "../component/Addproduction"

const { Step } = Steps;
const { Option } = Select;

const steps = [
    {
        title: '选择甲方',
        content: '选择甲方',
    },
    {
        title: '选择乙方',
        content: '选择乙方',
    },
    {
        title: '新增订单',
        content: '新增订单',
    },
];

const App: React.FC = () => {
    const [flag, setFlag] = useState(true);
    const [flag1, setFlag1] = useState(true);
    const [flag2, setFlag2] = useState(true);
    const [current, setCurrent] = useState(0);
    const next = () => {
        setCurrent(current + 1);
        console.log(flag, flag1)
    };

    const prev = () => {
        setCurrent(current - 1);
        console.log(flag, flag1)
    };
    const confirm = () => {
        console.log(flag, flag1)
    }

    let [datas, setData] = useState<Array<any>>([])
    let [datas2, setdatas2] = useState<Array<any>>([]);
    useEffect(() => {
        async function jiafang() {
            let { data } = await Partainfos.query({})
            setData(datas = data.msg)
        }
        jiafang()
        async function yifang() {
            let { data } = await Partbinfos.query({})
            setdatas2(datas2 = data.msg)
        }
        yifang()
    }, [])

    const { Option } = Select;
    useEffect(() => {
        if (current === 0) {
            setFlag(true)
        } else {
            setFlag(false)
        }
        if (current === 1) {
            setFlag1(true)
        } else {
            setFlag1(false)
        }
        if (current === 2) {
            setFlag2(true)
        } else {
            setFlag2(false)
        }
    }, [current])


    let [arr, setarr] = useState<Array<any>>([]);
    let [info, setinfo] = useState<Array<any>>([])
    let handleChange = (value: any) => {
        let list = datas.filter(item => item.name == value.value)
        setarr(arr = list)
    }
    let handleChange2 = (value: any) => {
        let list2 = datas2.filter(item => item.partbname == value.value)
        setinfo(info = list2)
    }


    // 表格
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        nameyi: string;
        productname: string;
        color: string;
        light: string;
        direction: string;
    }

    const columns: ColumnsType<DataType> = [
        {
            title: '甲方姓名',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: '联系方式',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '订单时间',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '乙方姓名',
            key: 'nameyi',
            dataIndex: 'nameyi',
        },
        {
            title: '产品型号',
            key: 'productname',
            dataIndex: 'productname',
        },
        {
            title: '颜色',
            key: 'color',
            dataIndex: 'color',
        },
        {
            title: '方向',
            key: 'direction',
            dataIndex: 'direction',
        },
        {
            title: '光源',
            key: 'light',
            dataIndex: 'light',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>删除订单</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: "甲方",
            age: 123456789,
            address: 'now',
            nameyi: "乙方",
            productname: "123",
            color: "red",
            light: "top",
            direction: "right"

        }

    ];


    return (
        <>
            <Steps current={current}>
                {steps.map(item => (
                    <Step key={item.title} title={item.title} />
                ))}
            </Steps>




            {
                flag && <Select
                    labelInValue
                    defaultValue={{ value: '请选择甲方', label: '请选择甲方' }}
                    style={{ width: 120, marginTop: '10px', marginBottom: '10px' }}
                    onChange={handleChange}

                >
                    {datas.map((item) => {
                        return (<Option value={item.name} key={item._id}>{item.name}</Option>)
                    })}

                </Select>
            }
            {flag && arr.map((item) => {
                return (
                    <div key={item._id} style={{ marginTop: '10px', marginBottom: '10px' }}>
                        <div>电话:{item.age}</div>
                        <div>日期:{item.address}</div>
                    </div>
                )
            })}
            {
                flag1 && <Select
                    labelInValue
                    defaultValue={{ value: '请选择乙方', label: '请选择乙方' }}
                    style={{ width: 120, marginTop: '10px', marginBottom: '10px' }}
                    onChange={handleChange2}
                >
                    {datas2.map((item) => {
                        return (<Option value={item.partbname} key={item._id}>{item.partaname}</Option>)
                    })}

                </Select>
            }
            {flag1 && info.map((item) => {
                return (
                    <div key={item._id} style={{ marginTop: '10px', marginBottom: '10px' }}>
                        <div>传真:{item.fax}</div>
                    </div>
                )
            })}
            {
                flag2 && <>
                    <Table columns={columns} dataSource={data} />
                    <Addproduction></Addproduction>
                </>
            }

            <div className="steps-action" style={{ marginTop: '50px', marginBottom: '10px' }}>
                {current < steps.length - 1 && (
                    <Button type="primary" onClick={() => next()}>
                        下一步
                    </Button>
                )}
                {current === steps.length - 1 && (
                    <Button type="primary" onClick={() => confirm()}>
                        确认
                    </Button>
                )}
                {current > 0 && (
                    <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                        上一步
                    </Button>
                )}
            </div>
        </>
    );
};

export default App;